<template>
    <div>
        <el-form :inline="true" :model="query" class="demo-form-inline">
            <el-form-item label="订单编号">
                <el-input v-model="query.outTradeNo" clearable placeholder="订单编号"></el-input>
            </el-form-item>
            <el-form-item label="订单类型" style="width: 210px;">

                <el-select v-model="query.type" placeholder="订单类型" clearable>
                    <el-option v-for="item in productTypeMap" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <!-- 搜索按钮 -->
            <el-form-item>
                <el-button type="primary" @click="getList">搜索</el-button>
            </el-form-item>

        </el-form>
        <el-table :data="orderList" height="70vh">
            <el-table-column prop="productName" label="订单名称"></el-table-column>
            <el-table-column prop="userName" label="用户名称"></el-table-column>
            <el-table-column prop="outTradeNo" label="订单编号"></el-table-column>
            <!-- 订单金额 -->
            <el-table-column prop="totalAmount" label="订单金额">
                <template #default="scope">
                    <el-tag type="success" effect="dark"> {{scope.row.totalAmount }}元</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="订单类型">
                <template #default="scope">
                    {{productTypeMap.find(item => item.value == scope.row.type)?.label || '其他'}}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <!-- <el-table-column prop="updateTime" label="更新时间"></el-table-column> -->
        </el-table>
        <div style="margin-top: 10px;">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                v-model:currentPage="query.pageNum" :page-size="query.pageSize" layout="->,total, prev, pager, next,"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script setup>
import { getOrderList } from '@/api/zhaokao/downloadZone';
import { ref } from 'vue';
import { productTypeMap } from '@/pages/order/utils';


const orderList = ref([]);
const query = ref({
    pageNum: 1,
    pageSize: 10,
})
const total = ref(0);
const getList = () => {
    getOrderList(query.value).then(res => {
        console.log(res.data.records);
        orderList.value = res.data.records;
        total.value = res.data.total;
    })
}
getList()
const handleSizeChange = (val) => {
    query.value.pageSize = val;
    getList();
}
const handleCurrentChange = (val) => {
    query.value.pageNum = val;
    getList();
}
</script>
<style scoped lang="scss"></style>